<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>赶走猎人</title>
    <style>
        * {
            margin: 0 0;
            padding: 0 0;
        }
        
        #game_div {
            position: relative;
            width: 800px;
            height: 500px;
            background: url(img/back.jpg);
            background-position: 0px -305px;
            margin: 0px auto 0 auto;
            overflow: hidden;
            zoom: 1.2;
        }
        
        #zt_div {
            position: absolute;
            top: 235px;
            left: 60px;
            z-index: 10;
            opacity: 1; //透明
            display: none;
            margin: 0 auto;
        }
        
        #zt_div img {
            width: 100px;
            height: 100px;
            margin: 0 30px;
        }
        
        #tm {
            margin: 0 auto;
            opacity: 0; //透明
            display: none;
        }
        
        #ks {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            z-index: 15;
        }
        /* 开始按钮 */
        
        #ksBtn {
            width: 140px;
            height: 50px;
            background: linear-gradient(to left, #ff9900, #ff3300);
            border-radius: 25px;
            line-height: 50px;
            text-align: center;
            color: #eeeeee;
            box-shadow: 0px 0px 10px #ff3300;
            font-size: 20px;
            margin: 85px 0px 0px 325px;
            float: left;
            z-index: 16;
        }
        
        #ksBtn:hover {
            background: linear-gradient(to left, #ffcc55, #ff6655);
            cursor: pointer;
        }
        /* 开始说明 */
        
        #kssm {
            width: 500px;
            height: 120px;
            background: #ffffff;
            border-radius: 15px;
            font-size: 17px;
            margin: 70px auto auto 125px;
            padding: 20px;
            float: left;
            opacity: 0.5;
            color: black;
        }
        
        #kssm p {
            text-indent: 30px;
        }
        /*标题*/
        
        #biaoti {
            width: 100%;
            height: 50px;
            background: linear-gradient(to left, #ff9900, #ff0000);
            -webkit-background-clip: text;
            color: transparent;
            font-weight: bold;
            font-size: 40px;
            float: left;
            margin: 55px auto 0 auto;
            text-align: center;
            line-height: 40px;
            letter-spacing: 2px;
        }
        /* 左上角的时间 */
        
        #fan {
            width: 80px;
            height: 40px;
            border: 3px solid #255943;
            border-radius: 5px;
            color: #ff3300;
            font-size: 25px;
            text-align: center;
            line-height: 40px;
            font-weight: bolder;
            margin: 6px;
            position: absolute;
            z-index: 9;
            display: none;
        }
        /* 死亡后的页面 */
        
        #over {
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.7;
            color: #ffffff;
            font-size: 50px;
            text-align: center;
            padding-top: 100px;
            display: none;
            position: absolute;
            z-index: 15;
            top: -600px;
        }
        /* 死亡后页面显示的分数 */
        
        #ndfen {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #eeeeee;
            margin: 50px auto;
            font-size: 18px;
        }
        /* 重新开始 */
        
        #rest {
            width: 130px;
            height: 40px;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            color: #eeeeee;
            margin: 0px auto;
            font-size: 20px;
        }
        
        #xin {
            width: 120px;
            height: 30px;
            position: absolute;
            top: 55px;
            display: none;
        }
        
        .heart {
            width: 25px;
            height: 25px;
            margin: 5px;
            background: url(img/heart.png);
            background-size: cover;
            float: left;
        }
        /* 鸟巢 */
        
        #bird_nest {
            width: 80px;
            height: 50px;
            background: url(img/bird_nest.png);
            background-size: cover;
            position: absolute;
            top: 200px;
            left: 185px;
            display: none;
        }
        /* 小鸟 */
        
        #bird {
            width: 50px;
            height: 50px;
            background: url(img/bird.gif);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 0px 50px;
            position: absolute;
            top: 160px;
            left: 200px;
        }
        /* 通过后的页面 */
        
        #pass {
            width: 100%;
            height: 100%;
            position: absolute;
            display: none;
        }
        /* 弹出的文字 */
        
        #pass_word {
            width: 600px;
            height: 100px;
            color: #ffffff;
            font-size: 20px;
            margin: 25px auto;
            border-radius: 20px;
            padding: 20px;
            background: #000000;
            opacity: 0.5;
        }
        /* 下一个页面的按钮 */
        
        #pass_next {
            width: 150px;
            height: 50px;
            border-radius: 30px;
            background: linear-gradient(to left, #fd8a00, #fd4f25);
            box-shadow: 0px 0px 10px #fd6d25;
            color: #ffffff;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            position: absolute;
            top: 300px;
            left: 325px;
            display: none;
        }
        
        #pass_next:hover {
            background: #fd9854;
            cursor: pointer;
        }
    </style>

    <script>
        var game_div, tl, jg, sc, djs_span, df_span, ksBtn, ztBtn, tzBtn;
        var imgs, bird_nest, music_back, music_over;
        var heart1, heart2, heart3, xin;
        var djs_id, jg_id, tl_id, play_id;
        var djs_data; //倒计时的时间
        var jxGame_sc; //继续游戏的总时长
        var dz = 0,
            ld = 0,
            df = 0; //游戏计分
        var fen, fan; //游戏分,时间

        //鼠标的自定义图片样式
        window.onmousedown = function() {
            document.getElementById("game_div").style.cursor = 'url("./img/c2.png") 12 12, auto';
        }
        window.onmouseup = function() {
            document.getElementById("game_div").style.cursor = 'url("./img/c1.png") 12 12, auto';
        }

        window.onload = function() {
            //获取HTML元素
            tl = document.getElementById("tl");
            jg = document.getElementById("jg");
            sc = document.getElementById("sc");
            djs_span = document.getElementById("djs");
            df_span = document.getElementById("defen");
            ksBtn = document.getElementById("ksBtn");
            ztBtn = document.getElementById("ztBtn");
            tzBtn = document.getElementById("tzBtn");
            imgs = document.images;
            zt_div = document.getElementById("zt_div");
            heart1 = document.getElementById("heart1");
            heart2 = document.getElementById("heart2");
            heart3 = document.getElementById("heart3");
            xin = document.getElementById("xin");
            game_div = document.getElementById("game_div");
            bird_nest = document.getElementById("bird_nest");
            music_back = document.getElementById("music_back"); //背景音乐
            music_over = document.getElementById("music_over"); //游戏结束音乐
        }

        //游戏开始事件
        function start() {
            var ks = document.getElementById('ks'); //开始按钮
            ks.style.display = "none"; //用css的手法把标签隐藏掉了
            xin.style.display = "block";
            bird_nest.style.display = "block";
            music_back.play(); //播放背景音乐

            fan = document.getElementById("fan");
            fan.style.display = "block";
            tl_time = parseInt(tl.value); //停留时间
            jg_time = parseInt(jg.value); //间隔时间
            sc_time = parseInt(sc.value); //游戏时长
            //设置第一次开始游戏
            isOneStart = true;
            //记录游戏开始时间
            start_Time = new Date();
            //执行倒计时方法
            djs();
            //执行地鼠出现的方法
            mouse_show();
        }
        //倒计时方法
        function djs() {
            //实时记录游戏时间
            var game_time = new Date();
            //计算倒计时
            djs_data = sc_time * 15 - parseInt((game_time - start_Time) / 1000);
            djs_span.innerHTML = djs_data;
            if (djs_data <= 0) {
                pass();
                return;
            }
            //倒计时的计时器
            djs_id = setTimeout("djs()", 1000);
        }

        //地鼠清场
        function qingchang() {
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].src = "img/00.jpg";
            }
        }

        //地鼠出现方法
        function mouse_show() {
            //生成随机的数组下标
            var i = parseInt(Math.random() * imgs.length);
            //随机改变图片
            imgs[i].src = "img/lr1.png";
            //地鼠出现间隔
            jg_id = setTimeout("mouse_show()", jg_time * 850);
            //地鼠停留时间
            tl_id = setTimeout("mouse_hide(" + i + ")", tl_time * 800);
        }


        //地鼠消失，没打中
        function mouse_hide(i) {
            var name = imgs[i].src.substr(imgs[i].src.length - 5, 1);
            if (name == 1) {
                imgs[i].src = "img/00.png";
                //计分
                ld++;
                df--;
                if (df <= 0) {
                    df = 0;
                }
                df_span.innerHTML = "打中" + dz + "只，漏掉" + ld + "只，得分" + df;
                //没中的音效
                var music2 = document.createElement('audio');
                music2.innerHTML = '<audio src="img/miss.mp3" autoplay="autoplay" ></audio>'

                if (ld == 1) {
                    heart3.style.display = "none";
                    game_div.appendChild(music2);
                }
                if (ld == 2) {
                    heart2.style.display = "none";
                    game_div.appendChild(music2);
                }
                if (ld == 3) {
                    heart1.style.display = "none";
                    game_div.appendChild(music2);
                }
                if (ld >= 3) {
                    gameover();
                    return;
                }
            }
        }

        //打中地鼠
        function play(obj) {

            //获取图片的名称
            var name = obj.src.substr(obj.src.length - 5, 1);
            if (name == 1) {

                obj.src = "img/lr2.png";
                //计分
                dz++;
                df += 2;
                df_span.innerHTML = "打中" + dz + "只，漏掉" + ld + "只，得分" + df;
                //打中后还原
                play_id = setTimeout(function() {
                    obj.src = "img/00.png";
                    //clearTimeout(tl_id);
                }, 300);
            }
            //打中的音效
            var music1 = document.createElement('audio');
            music1.innerHTML = '<audio src="img/beat.mp3" autoplay="autoplay" ></audio>'
            game_div.appendChild(music1);

        }
        //游戏通关
        function pass() {
            clearTimeout(tl_id);
            clearTimeout(jg_id);
            clearTimeout(djs_id);
            zt_div.style.display = "none";
            xin.style.display = "none";
            fan.style.display = "none";
            var num = -305; //背景的初始位置
            var game_back = setInterval(function() {
                num = num + 2;
                game_div.style.backgroundPosition = "0px " + num + "px";
                if (num >= 0) {
                    num = 0;
                    game_div.style.backgroundPosition = "0px " + num + "px";
                    clearInterval(game_back);
                }
            }, 20)
            var bird = document.getElementById("bird");
            var num1 = 50; //小鸟背景的初始位置
            var bird_back = setInterval(function() {
                num1 = num1 - 1;
                bird.style.backgroundPosition = "0px " + num1 + "px";
                if (num1 <= 0) {
                    num1 = 0;
                    bird.style.backgroundPosition = "0px " + num1 + "px";
                    clearInterval(bird_back);
                    setTimeout(function() {
                        password();
                    }, 1500)
                }
            }, 50)
        }

        function password() {
            var pass = document.getElementById("pass");
            pass.style.display = "block";

            music_back.pause(); //背景音乐停
            //打字的声音
            var music2 = document.createElement('audio');
            music2.innerHTML = '<audio src="img/dz.mp3" autoplay="autoplay" ></audio>';
            game_div.appendChild(music2);

            //开始初始化基础文本
            var pass_word = document.getElementById("pass_word");
            var str = "终于在你协助之下我成功的逃离了猎人的追杀，但因为人类的乱砍乱伐，森林里的树木已经变得参差不齐了，\
							而为了不被猎人们发现，我现在不能飞的太高，请帮助我穿过这一片树林吧！";
            var i = 0;
            var flag = null;

            function done() {
                if (i < str.length) {
                    pass_word.innerHTML = str.substring(0, i + 1);
                    i = i + 2;
                } else {
                    clearInterval(flag);
                    var passnext = document.getElementById("pass_next");
                    passnext.style.display = "block";
                }
            }
            flag = setInterval(done, 50); //文字逐渐显示的时间
        }

        //游戏结束 
        function gameover() {
            clearTimeout(tl_id);
            clearTimeout(jg_id);
            clearTimeout(djs_id);
            music_over.play();
            music_back.pause(); //背景音乐停
            var ff = document.getElementById("ff");
            ff.innerHTML = djs_data;
            var over = document.getElementById("over");
            over.style.display = "block";
            setInterval(function() {
                var otop = over.offsetTop + 10;
                over.style.top = otop + "px";
                if (otop >= 0) {
                    otop = 0;
                    over.style.top = otop + "px";
                }
            }, 10)
        }

        function rest() {
            window.location.reload(); //刷新页面,相当于F5
        }
    </script>
</head>

<body>
    <!--游戏区域-->
    <div id="game_div">
        <div id="ks">
            <div id="biaoti">Protect&emsp;the&emsp;bird</div>
            <div id="ksBtn" onclick="start()">开始游戏</div>
            <div id="kssm">
                <b>说明：</b>游戏目标是打跑猎人，帮助小鸟回家。
                <p>游戏方式为鼠标操作，猎人随机出现，通过鼠标点击猎人将猎人打跑。</p>
                <p>（注意：不可以漏掉超过3个猎人。）</p>
                点击开始帮助小鸟回家吧！
            </div>
        </div>
        <div id="bird"></div>
        <div id="bird_nest"></div>
        <div id="pass">
            <div id="pass_word"></div>
            <a href="../fly/fly.html">
                <div id="pass_next">开始下一关</div>
            </a>
        </div>
        <div id="over">
            Game&emsp;Over
            <div id="ndfen">加油！还差<span id="ff">15</span>秒</div>
            <div id="rest" onclick="rest()">重新开始</div>
        </div>
        <div id="fen"></div>
        <div id="fan"><span id="djs"></span></div>
        <div id="xin">
            <div class="heart" id="heart1"></div>
            <div class="heart" id="heart2"></div>
            <div class="heart" id="heart3"></div>
        </div>
        <div id="zt_div">
            <div id="tm">
                地鼠停留时间：<input id="tl" type="text" size="5" value="1" />秒 地鼠出现间隔：
                <input id="jg" type="text" size="5" value="1" />秒 游戏时长：
                <input id="sc" type="text" size="5px" value="1" />分钟 游戏倒计时：
                <span id="djs"></span>秒 游戏得分：
                <span id="defen"></span>
            </div>
            <div>
                <table>
                    <tr>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                    </tr>
                    <tr>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                        <td><img src="img/00.png" onclick="play(this)" /></td>
                    </tr>
                </table>
            </div>
        </div>
        <audio src="img/back.mp3" id="music_back"></audio>
        <audio src="img/over.mp3" id="music_over"></audio>
    </div>
</body>

</html>